<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ price }}万</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
  </div>
</template>

<!-- toRefs和toRef是把reactive定义的对象转换成ref,同时修改了数据后会追奔复原，原始的数据也会改变 -->
<script lang="ts" setup name="Person">
import { reactive,toRefs,toRef } from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })

const { brand, price } = toRefs(car)
const price2 = toRef(car,'price')
function changeCarPrice() {
  price.value += 10
  console.log(price2.value)
  console.log('car:',car)
}

</script>